diff --git a/package-lock.json b/package-lock.json index c897b4690..77dcc33ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,12 +11,12 @@ "dependencies": { "@frctl/fractal": "^1.5.14", "@frctl/mandelbrot": "^1.10.1", - "@tacc/core-styles": "^2.11.0", + "@tacc/core-styles": "^2.22.2", "minimist": "^1.2.6" }, "engines": { - "node": "^16.14.0", - "npm": "^8.3.0" + "node": ">=16", + "npm": ">=8" } }, "node_modules/@allmarkedup/fang": { @@ -481,9 +481,9 @@ } }, "node_modules/@tacc/core-styles": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.11.0.tgz", - "integrity": "sha512-k7J2qpZSd8B9JD+1K7JzVvuOU8Q3guozI3oAaS9aLQYrJWzFVjhU1GTnjYHUcebPe0AAJTLlzvJy0x9+wW4J9A==", + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.22.2.tgz", + "integrity": "sha512-r2QTrZOcUZIjSIcOLktluGhPzGxvYNTEOKF7h6gYmQn8tgiFcesw4xzoIDCVynA5WpaPMZ2jkV3wM+M7SoBd9Q==", "bin": { "core-styles": "src/cli.js" }, @@ -493,7 +493,7 @@ }, "peerDependencies": { "commander": "^9.4.1", - "cssnano": "^5.1.14", + "cssnano": "^5.1.15", "js-yaml": "^4.1.0", "merge-lite": "^1.0.2", "node-cmd": "^5.0.0", @@ -503,7 +503,7 @@ "postcss-extend": "^1.0.5", "postcss-import": "^15.0.0", "postcss-preset-env": "^7.8.3", - "postcss-replace": "^2.0.0" + "postcss-replace": "^2.0.1" } }, "node_modules/@trysound/sax": { @@ -8728,9 +8728,9 @@ } }, "@tacc/core-styles": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.11.0.tgz", - "integrity": "sha512-k7J2qpZSd8B9JD+1K7JzVvuOU8Q3guozI3oAaS9aLQYrJWzFVjhU1GTnjYHUcebPe0AAJTLlzvJy0x9+wW4J9A==", + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.22.2.tgz", + "integrity": "sha512-r2QTrZOcUZIjSIcOLktluGhPzGxvYNTEOKF7h6gYmQn8tgiFcesw4xzoIDCVynA5WpaPMZ2jkV3wM+M7SoBd9Q==", "requires": {} }, "@trysound/sax": { diff --git a/package.json b/package.json index 0d3f019a3..afa5cb06a 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "dependencies": { "@frctl/fractal": "^1.5.14", "@frctl/mandelbrot": "^1.10.1", - "@tacc/core-styles": "^2.11.0", + "@tacc/core-styles": "^2.22.2", "minimist": "^1.2.6" }, "repository": "git@github.com:TACC/Core-CMS.git", diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css index 8b4349c16..94a831dc8 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css @@ -1,16 +1,20 @@ @import url("@tacc/core-styles/src/lib/_imports/components/c-button.selectors.css"); +@import url("@tacc/core-styles/src/lib/_imports/tools/selectors.form.css"); -:--c-button--primary, -:--c-button--secondary, -:--c-button--tertiary, -:--c-button--is-active { - padding: 10px 20px; - font-size: var(--global-font-size--small); - text-transform: uppercase; +:--main-content { + & :--c-button, + & :--form__button { + padding: 10px 20px; + + font-size: var(--global-font-size--small); + + font-weight: var(--bold); + letter-spacing: 0.05em; + } } -:--c-button { - font-weight: var(--bold); - letter-spacing: 0.05em; +:--c-button, +:--form__button { + text-transform: uppercase; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms--errors-via-c-message.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms--errors-via-c-message.css deleted file mode 100644 index 2437996c0..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms--errors-via-c-message.css +++ /dev/null @@ -1,23 +0,0 @@ -@import url("@tacc/core-styles/src/lib/_imports/components/c-message.css"); -@import url("@tacc/core-styles/src/lib/_imports/components/c-message--expanded.css"); - - - -/* Errors */ - -.form-errors { - @extend :--c-message; - @extend :--c-message--type; - @extend :--c-message--type-error; - @extend :--c-message--scope; - @extend :--c-message--scope-section; - @extend :--c-message--type-error:--c-message--scope-section; -} -.field-errors li { - @extend :--c-message; - @extend :--c-message--type; - @extend :--c-message--type-error; - @extend :--c-message--scope; - @extend :--c-message--scope-inline; - @extend :--c-message--type-error:--c-message--scope-inline; -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.css index daad3f6a9..06e543aa3 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.css @@ -1,174 +1 @@ -@import url("@tacc/core-styles/src/lib/_imports/components/c-button.css"); - -@import url("./django-cms-forms.hacks.css"); -@import url("./django-cms-forms--errors-via-c-message.css"); - - - -/* Title & Description */ - -.description { - margin-block: 25px; -} - - - -/* Help Text */ - -.help-text { - font-size: var(--global-font-size--small); - font-style: italic; -} -:not( - ul, /* FAQ: Lists already have margin-bottom */ - label /* FAQ: Labels already have margin-bottom */ -) + .help-text { - margin-top: 0.3em; /* mimic Bootstrap _reboot.css label margin-bottom */ -} -/* To prevent help text font-style from affecting any tags */ -/* FAQ: Help text can contain inline elements like */ -/* FAQ: Help text can be (ab)used to add headings between form fields */ -.help-text > :not(details, a, samp) { - font-style: initial; -} - - - -/* Fields */ - -.field-wrapper { - margin-bottom: 2rem; /* mimic

`margin-bottom` */ -} - -.field-wrapper:not(.checkboxinput) { - display: flex; - flex-direction: column; -} -.field-wrapper:not(.checkboxinput) > .field-errors { - order: 1; /* i.e. move to end */ -} - -.field-wrapper.checkboxinput { - display: inline-grid; - - column-gap: 0.5em; - align-items: center; - grid-template-columns: min-content auto; /* shrink input, let label extend */ - grid-template-areas: - 'error _____' - 'input label' - 'notes notes'; -} -.field-wrapper.checkboxinput .field-errors { grid-area: error; } -.field-wrapper.checkboxinput input { grid-area: input; } -.field-wrapper.checkboxinput label { grid-area: label; } -.field-wrapper.checkboxinput .help-text { grid-area: notes; } -.field-wrapper.checkboxinput label { - margin-bottom: 0; /* overwrite forms.css label */ -} - -ul.radioselect label, -ul.checkboxselectmultiple label { - display: flex; - gap: 0.5em; - align-items: center; - font-weight: revert; /* undo html-elements.cms.css */ -} -ul.radioselect li:last-child label, -ul.checkboxselectmultiple li:last-child label { - margin-bottom: 0; /* overwrite forms.css label */ -} - -/* Field: Required, Asterisk, Important */ - -.field-wrapper .asterisk { - margin-left: 0.5em; -} -.field-wrapper.required .asterisk { - color: var(--global-color-danger--dark); -} -.field-wrapper:not(.required) .asterisk -/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ { - color: var(--global-color-warning--dark); -} -/* To replace asterisk character with text */ -.field-wrapper .asterisk { - width: 0; - display: inline-block; - visibility: hidden; - line-height: 0; -} -.field-wrapper .asterisk::after { - visibility: visible; - line-height: initial; -} -.field-wrapper.required .asterisk::after { - content: '(required)'; -} -.field-wrapper:not(.required) .asterisk::after -/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ { - content: '(important)'; -} - - - -/* Errors */ - -.field-errors ul { - margin-top: 1rem; /* mimic ul margin-bottom */ -} -.form-errors ul, -.field-errors ul { - margin-bottom: 0; /* overwrite ul margin-bottom */ -} -.form-errors { - margin-bottom: 1rem; /* mimic ul margin-bottom */ -} - -.form-errors ul, -.field-errors ul { - list-style: none; - padding-inline: 0; -} - - - -/* Lists */ - -ul.radioselect, -ul.checkboxselectmultiple { - list-style: none; - - padding-left: 0; -} - - - -/* Layout */ - -.button-wrapper { - margin-top: 35px; -} - - - -/* Button */ - -/* To style obvious buttons that neglect class */ -.button-wrapper button[type="submit"] { - @extend :--c-button; - @extend :--c-button--primary; -} - -.form-button { - @extend :--c-button; -} -.form-button[type="submit"] { - @extend :--c-button--primary; -} -.form-button:where(:not([type="submit"], [type="reset"])) { - @extend :--c-button--secondary; -} -.form-button[type="reset"] { - @extend :--c-button--tertiary; -} +@import url("@tacc/core-styles/dist/components/django-cms-forms.css"); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.hacks.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.hacks.css deleted file mode 100644 index f388dad1c..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms.hacks.css +++ /dev/null @@ -1,48 +0,0 @@ -/* -Django CMS Form Hacks - -Render temporary messages to warn users and admins about unsupported feature(s) of the Django CMS Form plugin. - -Reference: - -- [FP-1808](https://jira.tacc.utexas.edu/browse/FP-1808) - -Styleguide Components.DjangoCMS.Forms.Hacks -*/ -@import url("../tools/selectors.css"); -/* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */ -/* @import url("@tacc/core-styles/src/lib/_imports/components/c-message.css"); */ - -@custom-selector :--problem-field - .field-wrapper.checkboxselectmultiple.required; - -/* To inform user or admin about unsupported required multi-checkbox field */ -/* HACK: This does not solve the problem; it just announces it */ -/* NOTE: Were we to @extend :--c-message, generated selectors become messy */ -:--problem-field > label::after { - display: block; - margin-top: 0.5em; - - /* To override styles inherited from `django-cms-forms.css` */ - font-weight: normal; - - padding: 15px 20px; - border: var(--global-border--thick); - font-size: var(--global-font-size--small); -} -/* To give error to admin */ -html:--cms-edit-mode :--problem-field > label::after { - content: 'A multi checkbox field that is required is not well implemented. Do not require this field or replace it with multiple required Yes/No radio fields.'; - - color: var(--global-color-danger--dark); - background-color: var(--global-color-danger--weak); - border-color: var(--global-color-danger--normal); -} -/* To give warning to user */ -html:not(:--cms-edit-mode) :--problem-field > label::after { - content: 'This field is not well implemented. Select all boxes to bypass the error with this field.'; - - color: var(--global-color-warning--dark); - background-color: var(--global-color-warning--weak); - border-color: var(--global-color-warning--normal); -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/config.yml b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/config.yml deleted file mode 100644 index 75f29a120..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/config.yml +++ /dev/null @@ -1,4 +0,0 @@ -label: Django CMS Forms -context: - shouldLoadCMS: true - shouldLoadBootstrap: true diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/django-cms-forms.hbs b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/django-cms-forms.hbs deleted file mode 100644 index fe739c42c..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/django-cms-forms.hbs +++ /dev/null @@ -1,407 +0,0 @@ -

- This component is maintained simuiltaneously with C Form and should look identical. Eventually, the two should have a single source of truth. To learn more, read (Confluence) APCD - Form Markup & Styles. -

-
- -

Title of Form

-
- I describe the form, but not very well. -
- -
-
- - -
- - - - - - -
- We use this to identify your submission. -
-
- -
- - - - - - -
- Choose your favorite fruit. -
-
- -
- - - - - - -
- We use this to know when to wake you up. -
-
- -
- - - - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- -
- Which radio stations do you prefer? -
-
- -
- - - - - - -
- Are you checking out today? -
-
- -
- - - - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- -
- - - - - - -
- At which time of day do you get hangry? -
-
- -
- - - - - - -
- Go on, tell me everything. -
-
- -
- - - - - - -
- Please enter today's date. -
-
- -
- - - - - - -
- Upload your favorite image. - - Supported types: - .jpeg,.jpg,.gif,.png - -
-
- -
- - - - - - -
-
- -
- - - -
-
-
- -
- - - - diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/readme.md b/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/readme.md deleted file mode 100644 index 795968004..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django-cms-forms/readme.md +++ /dev/null @@ -1,20 +0,0 @@ -To style forms built by [Django CMS forms][djcms-forms]. - -> **⚠️ Important** -> -> **Only** intended for [Django CMS forms][djcms-forms]. To style a form **not** using that plugin, use [TACC form component]({{path './c-form' }}). - -> **ⓘ Notice** -> -> Most of the markup can be seen at [template][djcms-forms-tpl]. Some of the classes and markup come from [Django form field widgets][django-form-widgets]. - -[djcms-forms]: https://pypi.org/project/djangocms-forms-maintained/ "DjangoCMS-Forms (Maintained)" -[djcms-forms-tpl]: https://github.com/avryhof/djangocms-forms/blob/ab38b22/djangocms_forms/templates/djangocms_forms/form_template/default.html "DjangoCMS Forms (Maintained) Template" -[django-form-widgets]: https://docs.djangoproject.com/en/2.2/ref/forms/widgets/ "Django Form Widgets" - -