@mrshmllw/smores-react 2.1.17 → 2.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,10 +5,11 @@ export declare type ConfirmationProps = {
5
5
  id: string;
6
6
  error?: boolean;
7
7
  errorMsg?: string;
8
- label: string;
8
+ label?: string;
9
9
  onBlur?: (e: FormEvent<HTMLInputElement>) => void;
10
10
  sublabel?: string | ReactElement;
11
11
  yesLabel?: string | ReactElement;
12
12
  noLabel?: string | ReactElement;
13
+ labelHidden?: boolean;
13
14
  };
14
15
  export declare const Confirmation: FC<ConfirmationProps>;
@@ -1,14 +1,14 @@
1
1
  import React from 'react';
2
- import styled from 'styled-components';
2
+ import styled, { css } from 'styled-components';
3
3
  import { theme } from '../theme';
4
4
  import { Box } from '../Box';
5
5
  import { Text } from '../Text';
6
6
  import { RadioButton } from './RadioButtonStyled';
7
- export const Confirmation = ({ checked, onChange, id, error = false, errorMsg = '', label, onBlur, sublabel, yesLabel = 'Yes', noLabel = 'No', }) => {
7
+ export const Confirmation = ({ checked, onChange, id, error = false, errorMsg = '', label, onBlur, sublabel, yesLabel = 'Yes', noLabel = 'No', labelHidden = false, }) => {
8
8
  return (React.createElement(ConfirmationWrapper, null,
9
- React.createElement(TextWrapper, null,
10
- React.createElement(SectionHeadingText, { tag: "h3" }, label),
11
- sublabel && (React.createElement(Text, { tag: "p", typo: "base-small", color: theme.colors.subtext }, sublabel))),
9
+ !labelHidden && (React.createElement(TextWrapper, null,
10
+ label && (React.createElement(SectionHeadingText, { tag: "h3", labelHidden: labelHidden }, label)),
11
+ sublabel && (React.createElement(Text, { tag: "p", typo: "base-small", color: theme.colors.subtext }, sublabel)))),
12
12
  React.createElement(RadioButtonGroupWrapper, null,
13
13
  React.createElement(RadioButtonGroup, null,
14
14
  React.createElement(RadioButtonWrapper, { checked: checked === true, error: error },
@@ -59,9 +59,20 @@ const ConfirmationWrapper = styled(Box) `
59
59
  grid-template-columns: 1fr 1fr;
60
60
  align-items: center;
61
61
  `;
62
- const SectionHeadingText = styled(Text) `
63
- font-weight: bold;
64
- `;
62
+ const SectionHeadingText = styled(Text)(({ labelHidden }) => css `
63
+ font-weight: bold;
64
+ ${labelHidden &&
65
+ `
66
+ clip: rect(1, 1, 1, 1);
67
+ clipPath: inset(50%);
68
+ height: 1;
69
+ margin: -1;
70
+ overflow: hidden;
71
+ padding: 0;
72
+ position: absolute;
73
+ width: 1;
74
+ `}
75
+ `);
65
76
  const TextWrapper = styled.div `
66
77
  display: flex;
67
78
  flex-direction: column;
@@ -1 +1 @@
1
- {"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"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"}
@@ -15,3 +15,4 @@ export declare const WithError: any;
15
15
  export declare const WithSublabel: any;
16
16
  export declare const WorkingExample: any;
17
17
  export declare const WithCustomLabel: any;
18
+ export declare const LabelHidden: any;
@@ -42,4 +42,12 @@ WithCustomLabel.args = {
42
42
  label: 'Do you like marshmallows?',
43
43
  yesLabel: 'Correct',
44
44
  };
45
+ export const LabelHidden = Template.bind({});
46
+ LabelHidden.args = {
47
+ id: 'radioButton',
48
+ onChange: noop,
49
+ checked: undefined,
50
+ yesLabel: 'Yes',
51
+ labelHidden: true,
52
+ };
45
53
  //# sourceMappingURL=Confirmation.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,oBAAC,YAAY,oBAAK,KAAK,EAAI,CAAA;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,2BAA2B;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,yBAAyB;CACpC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE7C,YAAY,CAAC,IAAI,GAAG;IAClB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,kEAAkE;CAC7E,CAAA;AAED,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,SAAS;CACpB,CAAA"}
1
+ {"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,oBAAC,YAAY,oBAAK,KAAK,EAAI,CAAA;AAE1E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,2BAA2B;CACnC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,yBAAyB;CACpC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE7C,YAAY,CAAC,IAAI,GAAG;IAClB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,kEAAkE;CAC7E,CAAA;AAED,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,2BAA2B;IAClC,QAAQ,EAAE,SAAS;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,EAAE,EAAE,aAAa;IACjB,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,IAAI;CAClB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "2.1.17",
3
+ "version": "2.1.18",
4
4
  "main": "./dist/index.js",
5
5
  "description": "Collection of React components used by Marshmallow Technology",
6
6
  "keywords": [