@pareto-engineering/design-system 2.0.0-alpha.38 → 2.0.0-alpha.40

package/src/stories/b/Logo.stories.jsx

@@ -24,6 +24,14 @@ export const Base = () => (
 
 export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
 
+export const Square = () => ALL_COLORS.map((color) => (
+  <Logo
+    square
+    color={color}
+    key={color}
+  />
+))
+
 // export const Animated = () => (
 //   <Logo animated />
 // )

package/src/stories/f/RatingsInput.stories.jsx

@@ -29,14 +29,14 @@ export default {
 
 export const Base = () => (
   <>
-    <RatingsInput ratingCount={5} name="ratings" />
+    <RatingsInput ratingCount={5} name="ratings" label="Your Rating" />
     <FormDebugger />
   </>
 )
 
 export const Numbers = () => (
   <>
-    <RatingsInput ratingCount={10} name="ratings" showRatingValue />
+    <RatingsInput ratingCount={10} name="ratings" showRatingValue label="Your Rating" />
     <FormDebugger />
   </>
 )
@@ -44,6 +44,7 @@ export const Numbers = () => (
 export const Labels = () => (
   <>
     <RatingsInput
+      label="Your Rating"
       labelMax="very satisfied."
       labelMin="not satisfied."
       ratingCount={10}

package/src/ui/b/Logo/Logo.jsx

@@ -15,7 +15,22 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'logo'
 
-const defaultTargets = [
+const defaultTargetssquare = [
+  {
+    id    :'logo',
+    target:'logo',
+  },
+]
+
+const contentMapSquare = {
+  default:{
+    sprite :'/logo_square.svg',
+    viewBox:'0 0 39 39',
+    targets:defaultTargetssquare,
+  },
+}
+
+const defaultTargetsWithName = [
   {
     id    :'logo_squares',
     target:'logo_squares',
@@ -26,11 +41,11 @@ const defaultTargets = [
   },
 ]
 
-const contentMap = {
+const contentMapWithName = {
   default:{
     sprite :'/logo.svg',
     viewBox:'0 0 156 30',
-    targets:defaultTargets,
+    targets:defaultTargetsWithName,
   },
 }
 
@@ -46,12 +61,14 @@ const Logo = ({
   width,
   variant,
   strokeColor,
+  square,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
     import('./styles.scss')
   }, [])
 
+  const contentMap = square ? contentMapSquare : contentMapWithName
   const svgConfig = useMemo(() => contentMap[variant], [variant])
 
   return (
@@ -117,6 +134,11 @@ Logo.propTypes = {
    * The color of the svg stroke
    */
   strokeColor:PropTypes.string,
+
+  /**
+   * Whether the logo should have a name.
+   */
+  square:PropTypes.bool,
 }
 
 Logo.defaultProps = {
@@ -124,6 +146,7 @@ Logo.defaultProps = {
   height     :'2em',
   variant    :'default',
   strokeColor:'transparent',
+  square     :false,
 }
 
 export default Logo

package/src/ui/f/fields/RatingsInput/RatingsInput.jsx

@@ -10,6 +10,7 @@ import styleNames from '@pareto-engineering/bem'
 // Local Definitions
 
 import { Rating } from './common'
+import { FormLabel } from '../../common'
 
 const baseClassName = styleNames.base
 
@@ -25,9 +26,12 @@ const RatingsInput = ({
   name,
   ratingCount,
   showRatingValue,
+  oneInputLabel,
+  label,
   labelMax,
   labelMin,
   displayRatingsLabel,
+  optional,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -47,24 +51,35 @@ const RatingsInput = ({
         .filter((e) => e)
         .join(' ')}
       style={style}
-      // {...otherProps}
     >
-      {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMin}</p>}
-      {[...Array(ratingCount)].map((_, index) => {
-        const ratingValue = index + 1
-        return (
-          <Rating
-            key={ratingValue}
-            ratingId={`${name}-${ratingValue}`}
-            value={ratingValue}
-            name={name}
-            hover={hover}
-            setHover={setHover}
-            showRatingValue={showRatingValue}
-          />
-        )
-      })}
-      {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMax}</p>}
+      <FormLabel
+        className={[
+          'input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+          .filter((e) => e)
+          .join(' ')}
+        name={name}
+        optional={optional}
+      >
+        { label }
+      </FormLabel>
+      <div className="stars">
+        {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMin}</p>}
+        {[...Array(ratingCount)].map((_, index) => {
+          const ratingValue = index + 1
+          return (
+            <Rating
+              key={ratingValue}
+              ratingId={`${name}-${ratingValue}`}
+              value={ratingValue}
+              name={name}
+              hover={hover}
+              setHover={setHover}
+              showRatingValue={showRatingValue}
+            />
+          )
+        })}
+        {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMax}</p>}
+      </div>
     </div>
   )
 }
@@ -97,6 +112,10 @@ RatingsInput.propTypes = {
    * Determines if the rating start value should be shown
    */
   showRatingValue    :PropTypes.bool,
+  /**
+   * The label of the ratings input
+   */
+  label              :PropTypes.string.isRequired,
   /**
    * description for the highest rating value
    */
@@ -109,6 +128,14 @@ RatingsInput.propTypes = {
    * If the rating lables should be shown
    */
   displayRatingsLabel:PropTypes.bool,
+  /**
+   * Whether the input is optional or not
+   */
+  optional           :PropTypes.bool,
+  /**
+ * If the slide will only have one input
+ */
+  oneInputLabel      :PropTypes.bool,
 }
 
 RatingsInput.defaultProps = {

package/src/ui/f/fields/RatingsInput/styles.scss

@@ -7,34 +7,43 @@ $default-transition: all .2s;
 
 .#{bem.$base}.ratings-input {
   display: flex;
+  flex-direction: column;
 
-  >:not(:last-child) {
-    margin-right: $default-rating-icon-margin;
+  p {
+    padding: $default-padding;
   }
 
-  .#{bem.$base}.rating {
+  .stars {
     display: flex;
 
-    input {
-      opacity: 0;
-      position: absolute;
-      visibility: none;
-      z-index: -1;
+    >:not(:last-child) {
+      margin-right: $default-rating-icon-margin;
     }
-
-    label {
+  
+    .#{bem.$base}.rating {
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: $default-padding;
-      transition: $default-transition;
-      cursor: pointer;
+  
+      input {
+        opacity: 0;
+        position: absolute;
+        visibility: none;
+        z-index: -1;
+      }
+  
+      label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: $default-padding;
+        transition: $default-transition;
+        cursor: pointer;
+      }
+    }
+  
+    .label-text {
+      margin-bottom: 0;
+      align-self: flex-end;
     }
-  }
-
-  .label-text {
-    margin-bottom: 0;
-    align-self: flex-end;
   }
 }
 

package/stylelint.config.js

@@ -1,24 +1,24 @@
 module.exports = {
-  extends: [
+  extends:[
     'stylelint-config-palantir',
     'stylelint-config-palantir/sass.js',
   ],
-  rules: {
-    indentation: 2,
-    'number-leading-zero': 'never',
-    'at-rule-no-unknown': [true,
+  rules:{
+    indentation          :2,
+    'number-leading-zero':'never',
+    'at-rule-no-unknown' :[true,
       {
-        ignoreAtRules: [
+        ignoreAtRules:[
         // additional scss at-rules:
           'content', 'each', 'else', 'error', 'extend', 'for', 'function', 'if', 'include', 'mixin', 'return', 'use', 'forward',
         ],
       },
     ],
-    'at-rule-empty-line-before': ['always', {
-      except: ['after-same-name', 'inside-block'],
-      ignoreAtRules: ['include', 'mixin', 'function'],
+    'at-rule-empty-line-before':['always', {
+      except       :['after-same-name', 'inside-block'],
+      ignoreAtRules:['include', 'mixin', 'function'],
     }],
-    'order/order': [
+    'order/order':[
       [
         'custom-properties',
         'at-variables',
@@ -34,12 +34,12 @@ module.exports = {
       ],
       { unspecified: 'ignore' },
     ],
-    'property-no-unknown': [
+    'property-no-unknown':[
       true,
       {
-        ignoreProperties: ['text-stroke', 'font-smooth'],
+        ignoreProperties:['text-stroke', 'font-smooth'],
       },
     ],
-    'max-nesting-depth': 5,
+    'max-nesting-depth':5,
   },
 }