From 2abd0d9547528de3dd9e2f8c539966faf9a9da2d Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 3 Dec 2019 13:38:00 -0300 Subject: [PATCH] feat: Level component (#102) --- ...hrome_iphone7_Misc_Level_Default_Story.png | Bin 0 -> 2662 bytes ..._Typography_Headline_Skeleton_Animated.png | Bin 443 -> 531 bytes ...graphy_Headline_Skeleton_Default_Story.png | Bin 443 -> 531 bytes ...Typography_Paragraph_Skeleton_Animated.png | Bin 743 -> 867 bytes ...raphy_Paragraph_Skeleton_Default_Story.png | Bin 743 -> 867 bytes ..._Typography_Subtitle_Skeleton_Animated.png | Bin 351 -> 391 bytes ...graphy_Subtitle_Skeleton_Default_Story.png | Bin 351 -> 391 bytes ...chrome_laptop_Misc_Level_Default_Story.png | Bin 0 -> 633 bytes ..._Typography_Headline_Skeleton_Animated.png | Bin 369 -> 429 bytes ...graphy_Headline_Skeleton_Default_Story.png | Bin 369 -> 429 bytes ...Typography_Paragraph_Skeleton_Animated.png | Bin 606 -> 698 bytes ...raphy_Paragraph_Skeleton_Default_Story.png | Bin 606 -> 698 bytes ..._Typography_Subtitle_Skeleton_Animated.png | Bin 290 -> 319 bytes ...graphy_Subtitle_Skeleton_Default_Story.png | Bin 290 -> 319 bytes .../fuselage/src/components/Level/index.js | 20 ++++++ .../fuselage/src/components/Level/spec.js | 18 +++++ .../fuselage/src/components/Level/stories.mdx | 32 +++++++++ .../fuselage/src/components/Level/styles.scss | 21 ++++++ .../fuselage/src/components/Text/styles.scss | 66 ++++++++++++++++++ packages/fuselage/src/components/index.js | 1 + packages/fuselage/src/components/index.scss | 1 + 21 files changed, 159 insertions(+) create mode 100644 packages/fuselage/.loki/reference/chrome_iphone7_Misc_Level_Default_Story.png create mode 100644 packages/fuselage/.loki/reference/chrome_laptop_Misc_Level_Default_Story.png create mode 100644 packages/fuselage/src/components/Level/index.js create mode 100644 packages/fuselage/src/components/Level/spec.js create mode 100644 packages/fuselage/src/components/Level/stories.mdx create mode 100644 packages/fuselage/src/components/Level/styles.scss diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Level_Default_Story.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Level_Default_Story.png new file mode 100644 index 0000000000000000000000000000000000000000..fbfc353c62506d5a8a110e99e6c3f965a1730a1e GIT binary patch literal 2662 zcmeAS@N?(olHy`uVBq!ia0y~yU|Pq(!1#`X4JZ=l-}fCzu@pObhHwBu4M$1`0|S?= zr;B4q#hkY{4EY{;3AkST*uil8z&~-0BNMLb9E>-b^ndHQle@njS{;>^_K$(#!2dh< z7qbKDdc_z<1`h$C@hTkQ3=Bdo+6)Yw)A!2T#J`V!!@%(1iQM%Qxu${!MCXkdBB z#o*9Xz{;TDxPysdf&vy}2D7r$XU<$yW?)F@?gn{yKwJt8G_&|J^od!v&FF@CF|iWrvK6i@$I%Fx+_b zXrM9?D3s@){|*V|(!KAh-Vc~l@E0O<&Zq@9e;@q(_1{rG1_r-(h5O$Q+HfH?%^^a0 z!S$|=S$GI$8AV_;C>2xnjrYSCt3;C%k| z_xgK4h5a@Yd-qOUC&Kmn%$Zk$3=AKRJf664nyC3xPwvEpNm^wg)1iJ%}7YaZK1^@s6+b;Fpks%-fWsyQH3vph*|LP3@0Px7;k)gel5CIbj lu+Pk_9svLVPmzpM72Lg(3q1@Y9RmOW002ovPDHLkV1iH58sGo` diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Headline_Skeleton_Default_Story.png b/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Headline_Skeleton_Default_Story.png index 60c056d25ff396ec9182d5d880f57065822d3e55..3d638ddd45a6f358b99bcd7e2f2fabe009ad015d 100644 GIT binary patch delta 98 zcmdnZJeg&JI9Ct{8v_HwRD&?ziHZu0dnY>S$|=S$GI$8AV_;C>2xnjrYSCt3;C%k| z_xgK4h5a@Yd-qOUC&Kmn%$Zk$3=AKRJf664nyC3xPwvEpNm^wg)1iJ%}7YaZK1^@s6+b;Fpks%-fWsyQH3vph*|LP3@0Px7;k)gel5CIbj lu+Pk_9svLVPmzpM72Lg(3q1@Y9RmOW002ovPDHLkV1iH58sGo` diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Skeleton_Animated.png b/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Skeleton_Animated.png index 1c1033386b45c9568f5d0f0345be5552d16e1cb2..4b09f3a4ca94ef40fe1bff561c403557f08f5948 100644 GIT binary patch delta 192 zcmaFP`j~BkxZD&DHUoOvV1$iSd2H*rA%e^UV~gTli-@6x{m4UYIU zabiADkqDQJvGHzq28IJ&$0uIY2a1>pTCD$lb1x&qkLPvq_Pf;u9u!WlXY>Kda9O0K nmGv_)G>G<3E@1Q!+rzl?qvYas9Q$4aoyg$n>gTe~DWM4fhOI(% delta 180 zcmaFN_MCNsxON2x8v_G_F?)e5kYX$ja(7}_cTVOdki$~!?AAKmU%C1*pk) u;(9Z#zL_)cDl;%79DO`lpGiyXko5eMlG%s+f87VVgu&C*&t;ucLK6V1D?U;H diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Skeleton_Default_Story.png b/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Skeleton_Default_Story.png index 1c1033386b45c9568f5d0f0345be5552d16e1cb2..4b09f3a4ca94ef40fe1bff561c403557f08f5948 100644 GIT binary patch delta 192 zcmaFP`j~BkxZD&DHUoOvV1$iSd2H*rA%e^UV~gTli-@6x{m4UYIU zabiADkqDQJvGHzq28IJ&$0uIY2a1>pTCD$lb1x&qkLPvq_Pf;u9u!WlXY>Kda9O0K nmGv_)G>G<3E@1Q!+rzl?qvYas9Q$4aoyg$n>gTe~DWM4fhOI(% delta 180 zcmaFN_MCNsxON2x8v_G_F?)e5kYX$ja(7}_cTVOdki$~!?AAKmU%C1*pk) u;(9Z#zL_)cDl;%79DO`lpGiyXko5eMlG%s+f87VVgu&C*&t;ucLK6V1D?U;H diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Subtitle_Skeleton_Animated.png b/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Subtitle_Skeleton_Animated.png index 1e8c7393060b19de89eaacd64e30097cb16b57cc..8a240884bc8cc9e14ab67fc7a38bf9d0b6c7e5d7 100644 GIT binary patch delta 144 zcmcc5)XqFXJl=wXje&u|Ccdf=NU;<U9N#(tW( sAaP=kDc2!8_0(3+2kK(*boFyt=akR{08xA`xBvhE delta 126 zcmZo?zRxs4TwITXje&vT<%QYbffQqLkh>GZx^prwCn^f-aeBHqhE&XXd&7~p!9jq< zk?+43BY!u`4@dP-u4gxAmd?4J!@%&N`1f^Y28IW`6CY|%+~+rOpCs3{GiRU9N#(tW( sAaP=kDc2!8_0(3+2kK(*boFyt=akR{08xA`xBvhE delta 126 zcmZo?zRxs4TwITXje&vT<%QYbffQqLkh>GZx^prwCn^f-aeBHqhE&XXd&7~p!9jq< zk?+43BY!u`4@dP-u4gxAmd?4J!@%&N`1f^Y28IW`6CY|%+~+rOpCs3{GiRZ8_M0{E=ybIF|wk8v_G_#$0vDiHZu0(i5EwdGDV8{q`PEkbz;tk>rW}Qzp*g5V1^8 qE9(b~MLgWd31U3qm~6nPBl>6ddal30H!|LW#5`U7T-G@yGywn@FCBXT diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Headline_Skeleton_Default_Story.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Headline_Skeleton_Default_Story.png index b049f0d89e2659c03b9540a7a94d8b6fdec3cdad..1583fa9668c6c7887c18a7ef7ecdd718b77c4392 100644 GIT binary patch delta 102 zcmey!w3c~-IF|+o8v_Hwk#kE+CMqg0hEH@d6ycl=6k%{U_jk|zcf24bgSXAZht?Ax z*i3w&$~&hxE$ur8NVGvzZn6QR&SX1AIUtr7+2q2_`)$iCQIMRctDnm{r-UW|R5%|D delta 92 zcmZ3>{E=ybIF|wk8v_G_#$0vDiHZu0(i5EwdGDV8{q`PEkbz;tk>rW}Qzp*g5V1^8 qE9(b~MLgWd31U3qm~6nPBl>6ddal30H!|LW#5`U7T-G@yGywn@FCBXT diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Skeleton_Animated.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Skeleton_Animated.png index 1a3aca6d7b9994462a8b32ccc18166162ebb7ab3..a11eeef034bb86e52abff79a4008a7b1e3301160 100644 GIT binary patch delta 215 zcmcb|vWsmB!&i6x!EAvp>M|K#H+A$lZxy-8q?;6BUISIVPIwihkZT|E@Gpih*I; zo^pOLBSLkuA(P2uDJE5s;xlL7$T5OMHylb92GJ)3Cl@lw@>;I{eRD5ZBBAs6WFDqS z=|gHD=?S=W2*Y(ec>e$W=4vK^2OB3RGFnXzU{srULsRTIcgqin&+8oh=YWjyboFyt I=akR{0E=ioe*gdg diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Skeleton_Default_Story.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Skeleton_Default_Story.png index 1a3aca6d7b9994462a8b32ccc18166162ebb7ab3..a11eeef034bb86e52abff79a4008a7b1e3301160 100644 GIT binary patch delta 215 zcmcb|vWsmB!&i6x!EAvp>M|K#H+A$lZxy-8q?;6BUISIVPIwihkZT|E@Gpih*I; zo^pOLBSLkuA(P2uDJE5s;xlL7$T5OMHylb92GJ)3Cl@lw@>;I{eRD5ZBBAs6WFDqS z=|gHD=?S=W2*Y(ec>e$W=4vK^2OB3RGFnXzU{srULsRTIcgqin&+8oh=YWjyboFyt I=akR{0E=ioe*gdg diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Subtitle_Skeleton_Animated.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Subtitle_Skeleton_Animated.png index 51080e5d3f9146e9334ac2569ee64af55224ce9d..f4a81cd7720a201988ee1ae7722ad16597a85304 100644 GIT binary patch literal 319 zcmeAS@N?(olHy`uVBq!ia0y~yU^N4>r8(Guq?^Kpav;T0?Bp530R%N1DIGxmH%}MG zkcv5PZyn@pa1dZ|6#eWU(wo@(FwWgMl;v~YvpF*@fvOl7oYviC1~bC$p8x&!9+$opWiH+e;uUP M)78&qol`;+0DbvKHUIzs literal 290 zcmeAS@N?(olHy`uVBq!ia0y~yU^N4>#W>i2WN1y*wnQU!LEjESCTKVA7)wR$6K4StZW8m27 z&kv#*Zm8yf1uPG#fw&WtX~x~0mgd(FvV-Bq!;PFE`U%Hu5arOf0W0@U)noSO3Mb?4 PfE0PU`njxgN@xNA<`_h{ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Subtitle_Skeleton_Default_Story.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Subtitle_Skeleton_Default_Story.png index 51080e5d3f9146e9334ac2569ee64af55224ce9d..f4a81cd7720a201988ee1ae7722ad16597a85304 100644 GIT binary patch literal 319 zcmeAS@N?(olHy`uVBq!ia0y~yU^N4>r8(Guq?^Kpav;T0?Bp530R%N1DIGxmH%}MG zkcv5PZyn@pa1dZ|6#eWU(wo@(FwWgMl;v~YvpF*@fvOl7oYviC1~bC$p8x&!9+$opWiH+e;uUP M)78&qol`;+0DbvKHUIzs literal 290 zcmeAS@N?(olHy`uVBq!ia0y~yU^N4>#W>i2WN1y*wnQU!LEjESCTKVA7)wR$6K4StZW8m27 z&kv#*Zm8yf1uPG#fw&WtX~x~0mgd(FvV-Bq!;PFE`U%Hu5arOf0W0@U)noSO3Mb?4 PfE0PU`njxgN@xNA<`_h{ diff --git a/packages/fuselage/src/components/Level/index.js b/packages/fuselage/src/components/Level/index.js new file mode 100644 index 0000000000..16b4afed51 --- /dev/null +++ b/packages/fuselage/src/components/Level/index.js @@ -0,0 +1,20 @@ +import React from 'react'; + +import { createStyledComponent } from '../../styles'; + +const Container = createStyledComponent('rcx-level', 'nav'); +const ItemContainer = createStyledComponent('rcx-level__item', 'div'); + +export const Level = React.forwardRef(function Level(props, ref) { + return ; +}); + +Level.displayName = 'Level'; + +export const LevelItem = React.forwardRef(function LevelItem(props, ref) { + return ; +}); + +LevelItem.displayName = 'Level.Item'; + +Level.Item = LevelItem; diff --git a/packages/fuselage/src/components/Level/spec.js b/packages/fuselage/src/components/Level/spec.js new file mode 100644 index 0000000000..9181c307c0 --- /dev/null +++ b/packages/fuselage/src/components/Level/spec.js @@ -0,0 +1,18 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import { Level } from '../..'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); + +describe('Level.Item', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); + }); +}); diff --git a/packages/fuselage/src/components/Level/stories.mdx b/packages/fuselage/src/components/Level/stories.mdx new file mode 100644 index 0000000000..a799e77017 --- /dev/null +++ b/packages/fuselage/src/components/Level/stories.mdx @@ -0,0 +1,32 @@ +import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks'; + +import { Headline, Level, Subtitle, Text } from '../..'; + + + +# Level + +A multi-purpose horizontal level, which can contain almost any other element. + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fuselage/src/components/Level/styles.scss b/packages/fuselage/src/components/Level/styles.scss new file mode 100644 index 0000000000..bf6dc920e1 --- /dev/null +++ b/packages/fuselage/src/components/Level/styles.scss @@ -0,0 +1,21 @@ +.rcx-level { + @include box; + + display: flex; + flex-flow: row wrap; +} + +.rcx-level__item { + @include box; + + flex: 1 1 100%; + + max-width: 100%; + padding-inline: $spaces-x8; + + text-align: center; + + @include when-breakpoint(md) { + flex-basis: auto; + } +} diff --git a/packages/fuselage/src/components/Text/styles.scss b/packages/fuselage/src/components/Text/styles.scss index 5b6c51ba0e..7123552f43 100644 --- a/packages/fuselage/src/components/Text/styles.scss +++ b/packages/fuselage/src/components/Text/styles.scss @@ -84,6 +84,72 @@ font-size: inherit; + @mixin use-style($font-size, $line-height) { + height: $font-size; + margin-block-start: calc((#{ $line-height } - #{ $font-size }) * 0.3); + margin-block-end: calc((#{ $line-height } - #{ $font-size }) * 0.7); + } + + &--style-headline { + @include use-style($font-size: $text-styles-h1-font-size, $line-height: $text-styles-h1-line-height); + } + + &--style-subtitle { + @include use-style($font-size: $text-styles-s1-font-size, $line-height: $text-styles-s1-line-height); + } + + &--style-paragraph { + @include use-style($font-size: $text-styles-p1-font-size, $line-height: $text-styles-p1-line-height); + } + + &--style-caption { + @include use-style($font-size: $text-styles-c1-font-size, $line-height: $text-styles-c1-line-height); + } + + &--style-micro { + @include use-style($font-size: $text-styles-micro-font-size, $line-height: $text-styles-micro-line-height); + } + + &--color-default { + background-color: #{ $text-colors-default }; + } + + &--color-info { + background-color: #{ $text-colors-info }; + } + + &--color-hint { + background-color: #{ $text-colors-hint }; + } + + &--color-disabled-label { + background-color: #{ $text-colors-disabled-label }; + } + + &--color-disabled { + background-color: #{ $text-colors-disabled }; + } + + &--color-alternative { + background-color: #{ $text-colors-alternative }; + } + + &--color-primary { + background-color: #{ $text-colors-primary }; + } + + &--color-success { + background-color: #{ $text-colors-success }; + } + + &--color-danger { + background-color: #{ $text-colors-danger }; + } + + &--color-warning { + background-color: #{ $text-colors-warning }; + } + &--animated { animation: rcx-skeleton__text-animation 1s linear 0s infinite running; } diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js index 25f17c7793..a468857f31 100644 --- a/packages/fuselage/src/components/index.js +++ b/packages/fuselage/src/components/index.js @@ -13,6 +13,7 @@ export * from './Headline'; export * from './Icon'; export * from './InputBox'; export * from './Label'; +export * from './Level'; export * from './Margins'; export * from './Paragraph'; export * from './PasswordInput'; diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss index 09b836282c..7799e58ce6 100644 --- a/packages/fuselage/src/components/index.scss +++ b/packages/fuselage/src/components/index.scss @@ -11,6 +11,7 @@ @import './Icon/styles.scss'; @import './InputBox/styles.scss'; @import './Label/styles.scss'; +@import './Level/styles.scss'; @import './Margins/styles.scss'; @import './Paragraph/styles.scss'; @import './Subtitle/styles.scss';