[PROPIN-558] Brand New Highlight Section (#1070)

blablacar · Feb 23, 2021 · f90a02e · f90a02e
1 parent 66539c1
commit f90a02e
Show file tree

Hide file tree

Showing 10 changed files with 577 additions and 147 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,11 +2,11 @@
 
 [...]
 
+- **[BREAKING CHANGE]** Brand new `HighlightSection` component.
 # v47.6.1 (22/02/2021)
 
 - **[FIX]** `Icons` display on Storybook Canvas
 - **[FIX]** `SelectField` and `PhoneField` unclickable down arrow
-
 # v47.6.0 (17/02/2021)
 
 - **[NEW]** Added `display` prop to `Proximity`

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -124,7 +124,8 @@
     "storybook-readme": "5.0.9",
     "styled-components": "4.3.2",
     "ts-loader": "6.2.1",
-    "typescript": "3.7.3"
+    "typescript": "3.7.3",
+    "uniqid": "5.3.0"
   },
   "dependencies": {
     "country-telephone-data": "0.6.0",

diff --git a/src/itemChoice/ItemChoice.tsx b/src/itemChoice/ItemChoice.tsx
@@ -20,7 +20,7 @@ export const ItemChoiceStatus = ItemStatus
 export type ItemChoiceProps = A11yProps &
   NormalizeProps &
   Readonly<{
-    label?: string
+    label?: string | JSX.Element
     labelInfo?: React.ReactNode
     data?: string
     dataInfo?: string

diff --git a/src/layout/section/highlightSection/HighlightSection.story.mdx b/src/layout/section/highlightSection/HighlightSection.story.mdx
@@ -1,38 +1,204 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'
 
-import { SpacingDivider } from '../../../divider/spacingDivider'
+import { RideAxis } from '../../../_utils/rideAxis'
 import { HighlightSection } from './index'
 
+export const axes = [
+  {
+    id: '11',
+    label: 'Toulouse',
+    data: '8,99 €',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '22',
+    label: <RideAxis from="Grenoble" to="Aéroport Lyon-Saint Exupéry" />,
+    data: '16,99 €',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '33',
+    label: <RideAxis from="Bus Paris" to="Lille" />,
+    data: '18,99 €',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '44',
+    label: <RideAxis from="Aéroport Lyon-Saint Exupéry" to="Lyon" />,
+    data: '8,99 €',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '55',
+    label: <RideAxis from="Aéroport Lyon-Saint Exupéry" to="Cannes" />,
+    data: '8,99 €',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '66',
+    label: 'Tous les trajet en bus',
+    data: '',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+]
+
+export const destinations = [
+  {
+    id: '1',
+    label: 'Lyon',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '2',
+    label: 'Cannes',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '3',
+    label: 'Toulouse',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '4',
+    label: 'Paris',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '5',
+    label: 'Nantes',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '6',
+    label: 'Bruxelles',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '7',
+    label: 'Amsterdam',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '8',
+    label: 'Amsterdam',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+  {
+    id: '9',
+    label: 'Tous les villes en bus',
+    href: '#',
+    ariaLabel: 'Aria label',
+  },
+]
+
+export const highlights = {
+  axes: { heading: 'Top trajets en bus', items: axes },
+  destinations: { heading: 'Top villes en bus', items: destinations },
+}
+
+export const axesOnly = {
+  axes: { heading: 'Top trajets en bus', items: axes },
+}
+
 <Meta title="Sections/HighlightSection" />
 
-# **HighlightSection**
+# HighlightSection
 
 <Canvas>
   <Story name="Default">
-    <React.Fragment>
-      <SpacingDivider />
-      <HighlightSection title="Section title">
-        This some content for the highlighted section!
-        <br />
-        Some more content.
-        <br />
-        Some more more content.
-      </HighlightSection>
-      <SpacingDivider />
-    </React.Fragment>
+    <HighlightSection
+      highlights={highlights}
+      toggle={{
+        on: 'Show more',
+        off: 'Show less',
+      }}
+    />
+  </Story>
+</Canvas>
+
+## Axes
+
+<Canvas>
+  <Story name="with only Axes">
+    <HighlightSection
+      highlights={axesOnly}
+      toggle={{
+        on: 'Show more',
+        off: 'Show less',
+      }}
+    />
   </Story>
 </Canvas>
 
 ## Specifications
 
+`HighlightSection` is applied mainly on Landing Pages to **highlight common axes**.
+It's divided on two main sections. It receives axes data and handles its display.
+
+> _SEO_
+>
+> Content should not be completly hidden from the DOM. It uses CSS to handle visibility
+
+### Behavior
+
+It follows a _Grid System_: from 1 column stacked moving up to 3 equal columns.
+
+## Components
+
+`HighlightSection` was split in several small components: `HighlightSectionElements`
+
+#### Link
+
+Action button/link for toggling collapse mode. It has on/off state
+
 ## Usage
 
 ```jsx
 import { HighlightSection } from '@blablacar/ui-library/build/layout/section/highlightSection'
 
-<HighlightSection title="Section title">
-  Section content
-</HighlightSection>
+const highlight = {
+  destinations: {
+    heading: 'Destinations heading'
+    items: [ {
+    id: '11',
+    label: 'Toulouse',
+    data: '8,99 €',
+    href: '#',
+    ariaLabel: 'Aria label',
+  }]
+},
+axes: {
+   heading: 'Axes heading'
+    items: [ {
+    id: '11',
+    label: 'Toulouse',
+    data: '8,99 €',
+    href: '#',
+    ariaLabel: 'Aria label',
+  }]
+}}
+
+<HighlightSection
+  highlights={highlights}
+  toggle={{
+    on: 'Show more',
+    off: 'Show less',
+  }}
+/>
 ```
 
 <ArgsTable of={HighlightSection} />
diff --git a/src/layout/section/highlightSection/HighlightSection.style.tsx b/src/layout/section/highlightSection/HighlightSection.style.tsx
@@ -1,13 +1,110 @@
 import styled from 'styled-components'
 
-import { color, space } from '../../../_utils/branding'
-import { BaseSection } from '../baseSection'
+import {
+  color,
+  componentSizes,
+  font,
+  radius,
+  responsiveBreakpoints,
+  space,
+} from '../../../_utils/branding'
+import { Button, ButtonStatus } from '../../../button'
+import { ItemChoice } from '../../../itemChoice'
+import { TextDisplay1 } from '../../../typography/display1'
 
-export const StyledHighlightSection = styled(BaseSection)`
-  background-color: ${color.green};
-  padding-bottom: ${space.xl};
+const Section = styled.section`
+  padding: 0 ${space.xl};
+  background-color: ${color.midnightGreen};
+  color: ${color.white};
+`
+const Content = styled.div`
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${componentSizes.largeSectionWidth};
+`
+export const Article = styled.article`
+  display: ${props => props.hidden && 'none'};
+`
+
+// Override TextDisplay1
+const Title = styled(TextDisplay1).attrs({
+  isInverted: true,
+})`
+  // @note: Space is applied to section
+  padding: ${space.xl} 0;
+`
 
-  & .section-content {
-    position: relative;
+// Override ItemChoice
+const Item = styled(ItemChoice)`
+  border-radius: ${radius.m};
+
+  // increase specificity to override sytles from ItemChoice
+  && {
+    display: flex;
+    min-height: 4.75em;
+    align-items: center;
+    background-color: ${color.white};
+    color: ${color.midnightGreen};
+    font-size: ${font.m.size};
+    line-height: ${font.m.lineHeight};
+
+    & .kirk-item-leftWrapper {
+      max-height: 2.3em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-lines: 2;
+      line-clamp: 2;
+      align-items: flex-start;
+      -webkit-line-clamp: 2;
+    }
+
+    & .kirk-item-rightText {
+      display: flex;
+      flex-shrink: 0;
+    }
   }
 `
+
+// Override Button
+const Link = styled(Button).attrs({
+  status: ButtonStatus.UNSTYLED,
+})`
+  && {
+    padding: 0;
+  }
+`
+
+const Actions = styled.div`
+  display: flex;
+  flex-direction: row-reverse;
+  padding: ${space.m} 0 ${space.xl};
+  margin-left: auto;
+`
+
+/* GRID SYSTEM: 3 Columns */
+export const Grid = styled.ul`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: ${space.l};
+  row-gap: ${space.m};
+  grid-auto-rows: minmax(4.75em, auto);
+
+  @media (${responsiveBreakpoints.isMediaLarge}) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+`
+export const Col = styled.li`
+  display: ${props => props.hidden && 'none'};
+  padding: 0;
+  margin: 0;
+`
+
+export const HighlightSectionElements = {
+  Section,
+  Content,
+  Article,
+  Title,
+  Item,
+  Actions,
+  Button: Link,
+}